<template>
<div class="box1" style="display:flex;flex-direction:column">
    <div class="head">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
    </div>

    <!-- <div style="margin: 15px 0;"></div> -->
    <div class="cbox">
       <div class="content" id="box" :style="{height:height+'px'}">
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <div v-for="city in cities" :key="city" :title="city" class="item" style="display:flex;flex-direction:column">
                <el-checkbox :label="city">
                    {{ city }}
                </el-checkbox>

            </div>

        </el-checkbox-group>
    </div>
    </div>
    

</div>
</template>

<script>
import {
    getGroupList
} from '@/api/retrieval'
import {
    getList
} from './leftBar.js'

let cityOptions = []
let data = {
    "queryConditions": [

    ],
    "aggConditions": [{
        "fieldName": "applicants_stat",
        "limit": 100
    }]
}
getGroupList(data).then(res => {
    console.log("数据", res.data.staticsMapList)
    let {
        staticsMapList
    } = res.data
    let arr = []
    staticsMapList.forEach(item => {
        arr.push(item.applicants_stat)
    })

    cityOptions = arr

})

// const obj = {
//   'total': 10000,
//   'values': [
//     {
//       'applicants_stat': '国家电网有限公司',
//       'num': 1100
//     },
//     {
//       'applicants_stat': '珠海格力电器股份有限公司',
//       'num': 720
//     },
//     {
//       'applicants_stat': '华为技术有限公司',
//       'num': 120
//     }
//   ]
// }

// const cityOptions = getList(obj)

export default {
    name: 'Number',
    props: {

    },

    data() {
        return {
            checkAll: false,
            checkedCities: [],
            cities: cityOptions,
            isIndeterminate: true,
            height: window.innerHeight - 50 - 60 - 40
        }
    },
    watch: {
        checkedCities: {
            handler(newV, oldV) {
                   console.log("新值",newV)
                if (newV.length > 10) {
                    this.$message({
                        message: '最多只能选10个',
                        type: 'warn'
                    })

                    this.checkedCities=this.checkedCities.slice(0,10)


                }else{
                    this.$emit('done', newV)
                }

               
            },
            deep: true
        }

    },
    mounted() {

        setTimeout(()=>{
             let checkboxs=document.getElementById("box").getElementsByClassName("item")
             checkboxs.forEach((item,index)=>{
                 
             item.onmousemove=function(){
                //   console.log(this.getElementsByTagName("input")[0].value)
                  
                //   let div = document.createElement("div")
                //     div.style.innerHTML="123"
                //   div.style.width="100px";
                //   div.style.height="60px";
                //   div.style.position="absolute"
                //   div.style.backgroundColor="red"
                //   div.style.right="-50px"
                //   div.style.zIndex="99999"
                  
                //   div.style.border="1px soild red"
                
                //   this.append(div)



             }


             })

           
             


        },500)

    },
    methods: {
        handleCheckAllChange(val) {
            this.checkedCities = val ? cityOptions : []
            this.isIndeterminate = false
        },
        handleCheckedCitiesChange(value) {
            const checkedCount = value.length
            this.checkAll = checkedCount === this.cities.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
        },
        mouseEnter(city, e) {
            // console.log('事件', e.target)
        }
    }
}
</script>

<style lang="scss" scoped>
.box1 {
    width: 100%;
    background-color: #ffffff;
    //  background-color: #f3f3f3;
      box-shadow: 4px 4px 4px #efeeee;

    .head {
        width: 100%;
        height: 60px;
        background-color: #ffffff;
        //  background-color: #f3f3f3;
        border: 1px solid #ebebeb;
        box-shadow: 4px 4px 4px #efeeee;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 8px 8px 0 0;
    }
    
    .cbox{
        overflow: hidden;
        width: calc(100% -1px);
        border-radius: 0 0 8px 8px;
       .content {
           width: calc(100% + 20px);
         background-color: #ffffff;
        border-right: 1px solid #ebebeb;
        border-bottom: 1px solid #efeeee;
         border-left: 1px solid #efeeee;
         border-radius: 0 0 8px 8px;
        overflow: auto;
        //   background-color:red;

        .item {
            width:   100%;
            // height: 40px;
            padding-left: 20px;
            border-bottom: 1px solid #efeeee;
            position: relative;
            box-sizing: border-box;
            //   background-color:red;
            //    border: 1px solid #ebebeb;
            //    box-shadow: 4px 4px 4px #efeeee;

            .el-checkbox {
                overflow: hidden;
                height: 40px;
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 1px;
                // background-color:red;

                ::v-deep.el-checkbox__label {
                    //    background-color: red;

                    width: 80%;
                    white-space: nowrap;
                    overflow: hidden;
                    // line-clamp: 2;
                    text-overflow: ellipsis;
                }

            }

            // background-color: bisque;
            //  background-color:red;
        }
    }
    }

    

}
</style>
